﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ClickCounter.aspx.cs" Inherits="BugSysSolution.PageTemplate.ClickCounter" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Knockout.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>点击了(<span data-bind="text:numberOfClicks"></span>)次</div>
        <button data-bind="click:registerClick,disable:hasClickedTooManyTimes">Click</button>
        <div data-bind="visible:hasClickedTooManyTimes">
            That's too many clicks! Please stop before you wear out your fingers.
            <button data-bind="click:resetClicks">Reset</button>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    var model = function () {
        this.numberOfClicks = ko.observable(0);
        this.registerClick = function () {
            this.numberOfClicks(this.numberOfClicks() + 1);
        };

        this.resetClicks = function () {
            this.numberOfClicks(0);
        };

        this.hasClickedTooManyTimes = ko.computed(function () {
            var bl = this.numberOfClicks() >= 3;
            return bl;
        }, this);
    };

    ko.applyBindings(new model());
</script>
